<template>
  <div class="detail" v-loading="isLoading" element-loading-text="拼命加载中">
   <div class="left">
     <el-button type="success" @click="back">Back</el-button>
   </div>
   <div class="right">
      <mavon-editor v-model="value" :toolbarsFlag="false" class="editor" :subfield="false" :defaultOpen="'preview'"/>
   </div>
  </div>
</template>

<script>
/* eslint-disable */
import {mapState} from 'vuex'
export default {
  name: 'detail',
  data() {
    return {
      value: '',
       isLoading: true,
    }
  },
  methods: {
    back() {
      this.$router.push('/page')
    },
    async getData() {
      let filename = this.$route.query.filename
      // 暂存入vuex
      this.$store.commit('setFilenameURL', filename)
      try {
        let data = await this.$axios.get(`/detail?id=${filename}`)
        if (data.data.code === 1) {
          this.value = data.data.data
          this.isLoading = false
        }
        if (data.data.code === 2) {
          this.$notify({
            title: '提示',
            message: `出现错误${err}`,
            position: 'bottom-right',
            type:'error'
          })
        }
      } catch(err) {

      }
    }
  },
  mounted() {
    this.getData()
  },
  computed: {
    ...mapState(['filenameURL'])
  },

}
</script>

<style lang="scss" scoped>
.detail {
  position: relative;
  display: flex;
  top: 60px;
  width: 95%;
  justify-content: center;
  //margin: 0 auto;
  .left {
    max-width: 120px;
    flex: 1;
    margin-right: 16px;
    margin-left: 16px;
    .el-button {
      width: 100%;
    }
  }
  .right {
    max-width: 800px;
    flex: 12;
    margin: 0 auto;
  }
}
</style>
